<template>
  <div class="edit-container">
    <div class="input-cu-group">
        <label for="good-name">商品名称</label>
        <input id="good-name" placeholder="请输入商品的名称" v-model="goodName"/>
        <label class="warn-tip" v-if="goodName===''">*</label>
    </div>
    <div class="input-cu-group">
        <label for="good-spec">商品规格</label>
        <input id="good-spec" placeholder="请输入商品的规格" v-model="goodSpec"/>
        <label class="warn-tip"  v-if="goodSpec===''">*</label>
    </div>
    <div class="input-cu-group">
        <label for="good-prcie">商品单价</label>
        <input id="good-prcie" type="number" placeholder="请输入商品的单价" v-model="goodPrice"/>
        <label class="warn-tip"  v-if="goodPrice===''">*</label>
    </div>
    <div class="input-cu-group">
        <label for="good-discount">商品折扣(无写0)</label>
        <input id="good-discount" type="number" placeholder="请输入商品的折扣价" v-model="goodDiscount"/>
        <label class="warn-tip"  v-if="goodDiscount===''">*</label>
    </div>
    <div class="input-cu-group">
        <label for="good-desc">商品描述</label>
        <input id="good-desc" placeholder="请输入商品的列表描述" v-model="goodDesc"/>
        <label class="warn-tip"  v-if="goodDesc===''">*</label>
    </div> 
    <div class="input-cu-group">
        <label for="good-detaildesc">商品详细描述</label>
        <input id="good-detaildesc" placeholder="请输入商品的详细描述" v-model="goodDetailDesc"/>
        <label class="warn-tip"  v-if="goodDetailDesc===''">*</label>
    </div>   
    <div class="input-cu-group">
        <label for="good-type">商品类别</label>
        <select ref="select" v-model="goodType">
            <optgroup >
                <option v-for="item in typeList" :key="item.typeId" :value="item.typeId" :selected="item.typeId==goodType?'selected':''">{{item.typeName}}</option>
            </optgroup>
        </select>
    </div>
    <button class="backButton" @click="back">返回列表</button>
    <button :class="canSubmit?'canSub':'cantSub'" @click="uploadUpdate">提交内容修改</button>
  </div>
</template>

<script>
export default {
    computed:{
        canSubmit(){
            return this.goodDiscount!=''&&this.goodName!=''&&this.goodPrice!=''&&this.goodSpec!=''
        }
    },
    data(){
        return {
            goodName:'',
            goodSpec:'',
            goodPrice:'',
            goodDiscount:'',
            goodType:1,
            goodDesc:'',
            goodDetailDesc:'',
            item:{},
            typeList:[]
        }
    },
    methods:{
        async uploadUpdate(){
            if(this.canSubmit){
                let {data:ret} = await this.$http.post('/updateGood',{
                    goodId:this.item.goodId,
                    goodName:this.goodName,
                    goodSpec:this.goodSpec,
                    goodPrice:this.goodPrice,
                    goodDiscount:this.goodDiscount,
                    goodType:this.goodType,
                    goodDesc:this.goodDesc,
                    goodDetailDesc:this.goodDetailDesc,
                })
                if(ret.affectedRows>0){
                    alert('修改成功')
                    this.$router.go(-1)
                }
            }
        },
        back(){
            this.$router.go(-1)
        }
    },
    async created(){
        this.item = this.$route.query
        this.goodName = this.item.goodName
        this.goodSpec = this.item.goodSpec
        this.goodPrice = this.item.goodPrice
        this.goodDiscount = this.item.goodDiscount
        this.goodType = this.item.goodType
        this.goodDesc = this.item.goodDesc
        this.goodDetailDesc = this.item.goodDetailDesc
        let {data:res} = await this.$http.get('/getAllType')
        this.typeList = res
    }
}
</script>

<style lang="less">
    .edit-container{
        display: flex;
        flex-direction: column;
        height: 90%;
        width: 95%;
        margin-top: 50px;
        background-color: #ffffff;
        box-sizing: border-box;
        padding:20px;
        border-radius: 20px;
        top: -20px;
        position: relative;
        .backButton{
            width: 30%;
            position: absolute;
            box-sizing: border-box;
            padding: 15px;
            border-radius: 25px;
            color: #ffffff;
            background-color: #1f3c48;
            border: 0px solid #d12311;
            bottom: 50px;
            left: 150px;
        }
        .cantSub{
            width: 30%;
            position: absolute;
            box-sizing: border-box;
            padding: 15px;
            border-radius: 25px;
            color: #ffffff;
            background-color: #797878;
            border: 0px solid #d12311;
            bottom: 50px;
            right: 150px;
        }
        .canSub{
            width: 30%;
            position: absolute;
            box-sizing: border-box;
            padding: 15px;
            border-radius: 25px;
            color: #ffffff;
            background-color: #1f3c48;
            border: 0px solid #d12311;
            bottom: 50px;
            right: 150px;
        }
        .canSub:hover{
            background-color: #11222a;
        }
        .input-cu-group{
            margin-bottom: 30px;
            position: relative;
            .warn-tip{
                margin-left: 10px;
                text-align: left;
                color: #C00000;
                font-weight: bolder;
            }
            label{
                margin-right: 10px;
                width: 160px;
                text-align: right;
                color: #797878;
            }
            input{
                box-sizing: border-box;
                padding: 5px 10px;
                width: 50%;
                border: 0.5px solid #a2a2a2;
                border-radius: 7px;
            }
            select{
                width: 50%;
                box-sizing: border-box;
                padding: 5px 10px;
                border: 0.5px solid #a2a2a2;
                border-radius: 7px;
            }
        }
    }
</style>